<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>火车票订单</title>
	<link rel="stylesheet" href="resources/layui/css/layui.css">
	<script src="resources/js/jquery-3.7.1.min.js"></script>
	<style>
		.main {
			margin-top: -25px;
			padding: 20px;
		}

		.layui-tab-content {
			margin-top: 10px;
			margin-left: 20px;
			width: 900px;
			height: 520px;
			overflow-y: auto;
		}

		.tips {
			background-color: #f1f1f1;
			padding: 10px;
			border: 1px solid #e6e6e6;
			margin-top: 10px;
		}

		.tips p {
			font-size: 14px;
			color: #666;
		}

		.order-table th,
		.order-table td {
			border: 1px solid #ddd;
			padding: 12px;
			text-align: left;
		}

		.order-table th {
			background-color: #f2f2f2;
			font-weight: bold;
		}

		.order-table tr:hover {
			background-color: #f5f5f5;
		}

		.order-table .order-time {
			background-color: #bbf0ff;
			font-size: 14px;
			color: black;
			padding: 10px;
		}

		.order-table .order-details {
			padding: 10px;
			height: auto;
		}

		.order-table .order-details .train-info {
			font-size: 18px;
			font-weight: bold;
			color: #333;
		}

		.order-table .order-details .passenger-info {
			font-size: 14px;
			color: #666;
		}

		.order-table .order-details .seat-info {
			font-size: 14px;
			color: #666;
		}

		.order-table .order-details .price-info {
			font-size: 14px;
			color: #666;
		}

		.order-table .order-details .status-info {
			font-size: 14px;
			color: #ff5555;
			font-weight: bold;
		}

		.order-table tbody,
		.order-table tfoot {
			border: 1px solid #55aaff;
		}

		.order-table tfoot {
			text-align: right;
			padding: 10px;
		}

		.order-table button {
			text-align: right;
			padding: 10px;
			cursor: pointer;
			border-radius: 4px;
			font-size: 14px;
		}

		.pay-button {
			float: left;
			background-color: orange;
			color: white;
			border: none;
			margin-left: 600px;
		}

		.cancel-button {
			background-color: #ffffff;
			border: 1px solid #d5d5d5;
			color: black;
			margin-left: 10px;
		}

		.cancel-button2 {
			background-color: #ffffff;
			border: 1px solid #d5d5d5;
			color: black;
			margin-left: 600px;
		}

		.layui-btn {
			background-color: orange;
			color: black;
		}

		/* 弹窗样式 */
		.modal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			background-color: #fff;
			margin: 10% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 300px;
			border-radius: 8px;
		}

		.modal-header {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.modal-body {
			text-align: center;
		}

		.payment-button {
			padding: 10px 20px;
			margin: 10px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.payment-button:hover {
			background-color: #45a049;
		}

		.close {
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
		}

		.close:hover {
			color: #000;
		}

	 /*	退票*/
		.modal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content2 {
			background-color: #fff;
			margin: 10% auto;
			padding: 20px;
			border: 1px solid #888;
			width: 500px;
			border-radius: 8px;
		}

		.modal-header2 {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.modal-body2 {
			text-align: left;
		}

		.modal-body2 p {
			margin: 10px 0;
		}

		.modal-body2 ul, .modal-body2 ol {
			margin: 10px 0;
			padding-left: 20px;
		}

		.modal-body2 li {
			margin: 5px 0;
		}

		.modal-footer {
			text-align: right;
			margin-top: 20px;
		}

		.cancel-button3, .confirm-button3 {
			padding: 10px 20px;
			margin: 5px;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.cancel-button3 {
			background-color: #d5d5d5;
			color: black;
		}

		.confirm-button3 {
			background-color: #4CAF50;
			color: white;
		}

		.close {
			float: right;
			font-size: 28px;
			font-weight: bold;
			cursor: pointer;
		}

		.close:hover {
			color: #000;
		}
	</style>
</head>
<body>
<div class="main">
	<div class="layui-tab layui-tab-card" lay-filter="box">
		<ul class="layui-tab-title">
			<li class="layui-this">未完成订单</li>
			<li>未出行订单</li>
			<li>历史订单</li>
		</ul>
		<div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<div class="layui-row layui-col-space15" id="table1" style="margin-left: 30px">
					<table class="order-table">
						<thead>
						<tr>
							<th>车次信息</th>
							<th>旅客信息</th>
							<th>席位信息</th>
							<th>票价</th>
							<th>车票状态</th>
						</tr>
						</thead>
						<tbody id="NoPay"></tbody>
					</table>
				</div>
			</div>
			<div class="layui-tab-item">
				<div class="layui-form" style="margin-left: 30px; margin-bottom: 20px;">
					<div class="layui-inline">
						<div class="layui-input-inline">
							<select name="queryType" lay-filter="queryType">
								<option value="ordertime">按订单日期查询</option>
								<option value="traintime">按乘车日期查询</option>
							</select>
						</div>
					</div>
					<div class="layui-inline">
						<div class="layui-input-inline">
							<input type="text" id="startDate" name="startDate" placeholder="起始日期" class="layui-input">
						</div>
						<div class="layui-input-inline">
							<input type="text" id="endDate" name="endDate" placeholder="结束日期" class="layui-input">
						</div>
					</div>
					<div class="layui-input-inline">
						<input type="text" id="search_1" name="search_1" placeholder="订单号/车次号/姓名" class="layui-input">
					</div>
					<div class="layui-inline">
						<button class="layui-btn" lay-submit lay-filter="search">查询</button>
					</div>
				</div>
				<div class="layui-row layui-col-space15" id="table2" style="margin-left: 30px">
					<table class="order-table">
						<thead>
						<tr>
							<th>车次信息</th>
							<th>旅客信息</th>
							<th>席位信息</th>
							<th>票价</th>
							<th>车票状态</th>
						</tr>
						</thead>
						<tbody id="OutPay"></tbody>
					</table>
				</div>
			</div>
			<div class="layui-tab-item">
				<div class="layui-form" style="margin-left: 30px; margin-bottom: 20px;">
					<div class="layui-inline">
						<label class="layui-form-label">乘车日期</label>
						<div class="layui-input-inline">
							<input type="text" id="intcar" name="intcar" placeholder="起始日期" class="layui-input">
						</div>
						<div class="layui-input-inline">
							<input type="text" id="outcar" name="outcar" placeholder="结束日期" class="layui-input">
						</div>
					</div>
					<div class="layui-input-inline">
						<input type="text" id="search_2" name="search_2" placeholder="订单号/车次号/姓名" class="layui-input">
					</div>
					<div class="layui-inline">
						<button class="layui-btn" lay-submit lay-filter="search">查询</button>
					</div>
				</div>
				<div class="layui-row layui-col-space15" id="table3" style="margin-left: 30px">
					<table class="order-table">
						<thead>
						<tr>
							<th>车次信息</th>
							<th>旅客信息</th>
							<th>席位信息</th>
							<th>票价</th>
							<th>车票状态</th>
						</tr>
						</thead>
						<tbody id="Pay"></tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="tips">
			<p><strong>温馨提示：</strong></p>
			<p>1. 席位已锁定，请在指定时间内完成网上支付。</p>
			<p>2. 逾期未支付，系统将取消本次交易。</p>
			<p>3. 在完成支付或取消本订单之前，您将无法购买其他车票。</p>
			<p>4. 未尽事宜详见《国铁集团铁路旅客运输规程》《广深港高速铁路跨境旅客运输组织规则》《中老铁路跨境旅客联运组织规则》等有关规定和车站公告。</p>
		</div>
	</div>
</div>

<!-- 支付弹窗 -->
<div id="payModal" class="modal" style="display: none;">
	<div class="modal-content">
		<div class="modal-header">
			<span class="close" onclick="closePayModal()">&times;</span>
			<h2>选择支付方式</h2>
		</div>
		<div class="modal-body">
			<p>请选择支付方式：</p>
			<button class="payment-button" onclick="payBalance('${orderId}')">余额支付</button>
			<button class="payment-button" onclick="payAlipay('${orderId}')">支付宝支付</button>
		</div>
	</div>
</div>
<!-- 退票弹窗 -->
<div id="refundModal" class="modal" style="display: none;">
	<div class="modal-content2">
		<div class="modal-header2">
			<span class="close" onclick="closeRefund()">&times;</span>
			<div style="background-color: #01AAED">
				<h2>退票申请</h2>
			</div>
		</div>
		<div class="modal-body2">
			<p><strong>共计退款：9元</strong></p>
			<p>手续费用：0元（当前时间退票不收取手续费）</p>
			<p>车票票价：9元</p>
			<p>应退票款：9元</p>
			<ul>
				<li>实际核收退票费及应退票款将按最终交易时间计算。</li>
				<li>如您需要办理该次列车前续、后续退票业务，请于退票车次票面开车时间前办理。</li>
			</ul>
			<hr>
			<p><strong>退票规则：</strong></p>
			<ol>
				<li>使用现金购买或已领取报销凭证的电子票，线上完成退票后，请持相关证件（购票证件、报销凭证）至车站窗口完成退款。如您同时购买了“乘意险”，可在车站窗口退款时一并办理。</li>
				<li>退票费按如下规则核收：票面乘车站开车时间前8天（含）以上不收取退票费，24小时以上收取2元，不足24小时收取1元。退票费最低按1元计收。更多退票规则请查看《退改说明》。</li>
				<li>应退款项按银行规定时限退还至购票时所使用的网上支付工具账户，请注意查询，如有疑问请致电12306人工客服查询。</li>
				<li>跨境旅客旅行须知详见铁路跨境旅客相关运输组织规则和车站公告。</li>
			</ol>
			<div class="modal-footer">
				<button class="cancel-button3" onclick="closeRefund()">取消</button>
				<button class="confirm-button3" onclick="confirmRefund()">确定</button>
			</div>
		</div>
	</div>
</div>



<script src="resources/layui/layui.js"></script>
<script>
	layui.use(['element', 'form', 'laydate'], function () {
		var element = layui.element;
		var form = layui.form;
		var laydate = layui.laydate;

		// 初始化组件
		element.init();
		form.render();

		// 初始化日期选择器
		laydate.render({ elem: '#startDate', type: 'date', format: 'yyyy-MM-dd' });
		laydate.render({ elem: '#endDate', type: 'date', format: 'yyyy-MM-dd' });
		laydate.render({ elem: '#intcar', type: 'date', format: 'yyyy-MM-dd' });
		laydate.render({ elem: '#outcar', type: 'date', format: 'yyyy-MM-dd' });

		// 页面加载时获取列表
		window.addEventListener('load', function () {
			let user = sessionStorage.getItem('user');
			var parsedUser = JSON.parse(user);
			var userId = parsedUser.userId;
			console.log(userId,1231313);
			if (userId) {
				orderList(userId);
			} else {
				alert('用户未登录');
			}
		});

		function orderList(userId) {
			// 获取订单数据
			$.ajax({
				url: 'order/select',
				type: 'get',
				data: { userId: userId },
				dataType: 'JSON',
				success: function (response) {
					if (response.code === 200) {
						var orderList = response.data.data;
						renderOrders(orderList);
						console.log(orderList);
					} else {
						console.error(response.message);
					}
				},
				error: function (error) {
					console.error('请求失败:', error);
				}
			});
		}

		// 渲染订单数据到不同页面
		function renderOrders(orderList) {
			var unpaidOrders = []; // 未支付订单
			var paidOrders = []; // 已支付订单
			var historyOrders = []; // 历史订单

			// 根据订单状态筛选订单
			orderList.forEach(function (order) {
				if (order.orderStatus === '未支付') {
					unpaidOrders.push(order);
				} else if (order.orderStatus === '已付款') {
					historyOrders.push(order);
					paidOrders.push(order);
				} else if (order.orderStatus === '已取消' ) {
					historyOrders.push(order);
				}
			});

			// 渲染未支付订单到未完成订单页面
			renderUnpaidOrders(unpaidOrders);

			// 渲染已支付订单到未出行订单页面
			renderPaidOrders(paidOrders);

			// 渲染历史订单到历史订单页面
			renderHistoryOrders(historyOrders);
		}

		// 渲染未支付订单到未完成订单页面
		function renderUnpaidOrders(orders) {
			var tbody = $('#NoPay');
			tbody.empty();

			orders.forEach(function (order) {
				var row = `
                    <tr class="order-time">
                        <td colspan="5">订票日期：${order.createTime}&emsp;&emsp;&emsp;订单号：${order.orderNote}</td>
                    </tr>
                    <tr>
                        <td class="order-details">
                            <div class="train-info">${order.startstationId}--${order.endstationId}  ${order.numberName}</div>
                            <div>${order.startTime} 开</div>
                        </td>
                        <td class="order-details">
                            <div class="passenger-info">${order.orderName}</div>
                            <div>居民身份证</div>
                        </td>
                        <td class="order-details">
                            <div class="seat-info">${order.typeName}</div>
                        </td>
                        <td class="order-details">
                            <div class="price-info">${order.orderMoney}</div>
                        </td>
                        <td class="order-details">
                            <div class="status-info">${order.orderStatus}</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <button class="cancel-button" onclick="cancelOrder('${order.orderId}')">取消订单</button>
                            <button class="pay-button" onclick="payOrder('${order.orderId}')">去支付</button>
                        </td>
                    </tr>
                `;
				tbody.append(row);
			});
		}

		// 渲染已支付订单到未出行订单页面
		function renderPaidOrders(orders) {
			var tbody = $('#OutPay');
			tbody.empty();

			orders.forEach(function (order) {
				var row = `
                    <tr class="order-time">
                        <td colspan="5">订票日期：${order.createTime}&emsp;&emsp;&emsp;订单号：${order.orderNote}</td>
                    </tr>
                    <tr>
                        <td class="order-details">
                            <div class="train-info">${order.startstationId}--${order.endstationId}  ${order.numberName}</div>
                            <div>${order.startTime} 开</div>
                        </td>
                        <td class="order-details">
                            <div class="passenger-info">${order.orderName}</div>
                            <div>居民身份证</div>
                        </td>
                        <td class="order-details">
                            <div class="seat-info">${order.typeName}</div>
                        </td>
                        <td class="order-details">
                            <div class="price-info">${order.orderMoney}</div>
                        </td>
                        <td class="order-details">
                            <div class="status-info">${order.orderStatus}</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <button class="cancel-button" onclick="openRefund('${order.orderId}')">退票</button>
                            <button class="pay-button" onclick="changeorder('${order.orderId}')">改签</button>
                        </td>
                    </tr>
                `;
				tbody.append(row);
			});
		}

		// 渲染历史订单到历史订单页面
		function renderHistoryOrders(orders) {
			var tbody = $('#Pay');
			tbody.empty();

			orders.forEach(function (order) {
				var row = `
                    <tr class="order-time">
                        <td colspan="5">订票日期：${order.createTime}&emsp;&emsp;&emsp;订单号：${order.orderNote}</td>
                    </tr>
                    <tr>
                        <td class="order-details">
                            <div class="train-info">${order.startstationId}--${order.endstationId}  ${order.numberName}</div>
                            <div>${order.startTime} 开</div>
                        </td>
                        <td class="order-details">
                            <div class="passenger-info">${order.orderName}</div>
                            <div>居民身份证</div>
                        </td>
                        <td class="order-details">
                            <div class="seat-info">${order.typeName}</div>
                        </td>
                        <td class="order-details">
                            <div class="price-info">${order.orderMoney}</div>
                        </td>
                        <td class="order-details">
                            <div class="status-info">${order.orderStatus}</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <button class="cancel-button2" onclick="deleteOrder('${order.orderId}')">删除</button>
                        </td>
                    </tr>
                `;
				tbody.append(row);
			});
		}


		var orderId2    //定义全局order

		// 监听查询按钮点击
		form.on('submit(search)', function (data) {
			console.log('查询条件：', data.field);
			return false; // 阻止表单提交
		});

	});

	// 打开退票弹窗
	function openRefund() {
		document.getElementById('refundModal').style.display = 'block';
	}

	// 关闭退票弹窗
	function closeRefund() {
		document.getElementById('refundModal').style.display = 'none';
	}

	// 支付订单
	function payOrder(orderId) {
		// 显示支付弹窗
		document.getElementById('payModal').style.display = 'block';
		orderId2 = orderId
		console.log(orderId2)
	}

	// 关闭支付弹窗
	function closePayModal() {
		document.getElementById('payModal').style.display = 'none';
	}

	// 使用余额支付
	function payBalance() {
		if (!confirm('确定使用余额支付吗？')) {

			return;
		}

		// 发送余额支付请求
		$.ajax({
			url: 'order/payBalance',
			type: 'put',
			contentType: 'application/json',
			data: JSON.stringify({
				orderId:orderId2
			}),
			dataType: 'JSON',
			success: function (response) {
				if (response.code === 200) {
					alert('支付成功');
					closePayModal();
					window.location.reload();
				} else {
					alert(response.message);
				}
			},
			error: function (error) {
				alert('请求失败');
			}
		});
	}

	// 取消订单
	function cancelOrder(orderId) {
		// 确认是否取消订单
		if (!confirm('确定要取消该订单吗？')) {
			return;
		}

		// 发送取消订单请求
		$.ajax({
			url: 'order/cancel',
			type: 'PUT',
			contentType: 'application/json',
			data: JSON.stringify({ orderId: orderId }),
			dataType: 'JSON',
			success: function (response) {
				if (response.code === 200) {
					alert('订单已成功取消');
					// 刷新订单列表
					window.location.reload();
				} else {
					alert(response.message);
				}
			},
			error: function (error) {
					lert('取消订单失败');
			}
		});
	}

	// 删除订单
	function deleteOrder(orderId) {

		if (!confirm('确定要删除该订单吗？')) {
			return;
		}

		// 发送删除订单请求
		$.ajax({
			url: `order/delete?orderId=${orderId}`,
			type: 'delete',
			data: { orderId: orderId },
			dataType: 'JSON',
			success: function (response) {
				if (response.code === 200) {
					alert('订单已成功删除');
					// 刷新订单列表
					window.location.reload();
				} else {
					alert(response.message);
				}
			},
			error: function (error) {
				alert('删除订单失败' );
			}
		});
	}

	//改签，打开弹窗
	function changeorder(orderId){
		if (!confirm('确定要改签吗？')) {
			return;
		}

		// 发送删除订单请求
		$.ajax({
			url: `order/getOrderInfo`,
			type: 'get',
			data: { orderId: orderId },
			dataType: 'JSON',
			success: function (response) {
				if (response.code === 200) {
					// alert('跳转中.....');
					console.log(response.data.data)
					var order = response.data.data
				} else {
					alert(response.message);
				}
			},
			error: function (error) {
				alert('查询订单失败' );
			}
		});
	}
</script>
</body>
</html>